<script setup>
import bag from "../assets/mybag/bag-container.png";
import cardPic from "../assets/mybag/cardBg.png";
import { http } from "../services/service";
import { ref } from "vue";
import cardList from "./components/cardList.vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const back = () => {
  router.go(-1);
};

const cards = [];
const cardListDto = ref([]);

const getCardList = () => {
  http.get(`/api/v1/center/getAppCardTypeList`).then(
    (response) => {
      const data = response?.data?.data;
      if (response?.data.code === 200) {
        cardListDto.value = data;
      }
    },
    () => {}
  );
};
getCardList();

const cardId = ref(1);
const active = ref(0);

const type = router.currentRoute.value.query.type;
const combine = router.currentRoute.value.query?.combine;

const onClickTab = (e) => {
  if (e.name === 0) {
    cardId.value = cardListDto.value.find((card) => card.id === 1)?.id;
  }
  if (e.name === 1) {
    cardId.value = cardListDto.value.find((card) => card.id === 2)?.id;
  }
  if (e.name === 2) {
    cardId.value = cardListDto.value.find((card) => card.id === 3)?.id;
  }
};

if (combine) {
  active.value = combine - 1;
}

const background = `url(${bag})`;
</script>

<template>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("myBag") }}
    </div>
    <div class="container-tab">
      <van-tabs
        v-model:active="active"
        :background="background"
        @click-tab="onClickTab"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="#9699A2"
      >
        <van-tab :title="$t('upperFour')">
          <cardList :cardId="cardId" :type="type"></cardList>
        </van-tab>
        <van-tab :title="$t('middleFour')">
          <cardList :cardId="cardId" :type="type"></cardList>
        </van-tab>
        <van-tab :title="$t('lowerFour')">
          <cardList :cardId="cardId" :type="type"></cardList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.container-tab {
  margin-top: 30px;
}
</style>
